<template>
    <div class="">
        <h1 style="font-weight:900;">账号信息</h1>
        <el-form ref="form" :model="loginInfo" label-width="100px">
  <el-form-item label="昵称">
      &emsp;{{loginInfo.nickname}}&emsp;
  </el-form-item>
   <el-form-item label="手机号">
     &emsp;{{loginInfo.mobile| filterTel}}
  </el-form-item>
  <el-form-item label="头像">
      &emsp;<img v-bind:src="loginInfo.avatar" width="150px" height="150px" style="border-radius: 10px;">&emsp;
    &emsp; <el-upload
        class="upload-demo"
        :action="BASE_API+'/eduoss/file/upload'"
        :show-file-list="false"
        multiple
        :on-success="handleAvatarSuccess">
        <el-button size="small" type="primary">更换头像</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>

  </el-form-item>
  <el-form-item label="登录密码">&emsp;
      <el-button @click="updatepassword()" type="text" :style="{ display: visibleSubmit  }">修改密码</el-button>
      
        <el-form v-if="showClass==true" label-width="70px">
            <el-form-item label="旧密码">
                <el-input v-model="password" style="width:250px" placeholder="请输入旧密码" type="password"></el-input>
            </el-form-item>
            <p>&emsp;</p>
            <el-form-item label="新密码">
                <el-input v-model="password2" style="width:250px" placeholder="请输入新密码" type="password"></el-input>
            </el-form-item>
            <p>&emsp;</p>
            <div style="margin-left:100px">
            <el-button @click="submit()">保存</el-button>
            <el-button @click="no()">取消</el-button>
            </div>
        </el-form>
  </el-form-item>

  <h1 style="font-weight:900;">个人信息</h1>
  <el-form-item label="真实姓名">
      &emsp;{{loginInfo.nickname}}&emsp;
  </el-form-item>
  <el-form-item label="性别">
      &emsp; 
      <el-radio-group v-model="loginInfo.sex" @change="changeHandler($event)"> 
      <el-radio :label="1">男</el-radio>
      <el-radio :label="2">女</el-radio>
      <el-radio :label="3">保密</el-radio>   
    </el-radio-group>
  </el-form-item>
  <el-form-item label="年龄">
    &emsp;
      <el-input v-model="loginInfo.age" style="width:50px"  @blur="onmouseleave()"></el-input>
  </el-form-item>
  <el-form-item label="个性签名">
      <el-input type="textarea" v-model="loginInfo.sign" @blur="onmouseleave()"></el-input>
  </el-form-item>
</el-form>
    </div>
</template>

<script>;
import cookie from "js-cookie";
import index from '@/api/index.js'
import md5 from 'js-md5';
export default {
    name: "",
    data() {
        return {
            loginInfo: {},
            BASE_API: "http://localhost:8002", // 接口API地址
            imagecropperShow: false, // 是否显示上传组件
            imagecropperKey: 0, // 上传组件id
            password:'',
            password2:'',
            showClass:false, //修改密码表单是否显示
            visibleSubmit: '',   //显示
        }
    },
    created(){
        this.showInfo();

    },
    filters:{
    //加密手机号
    filterTel(val){
      if(val){
        return (val.substring(3, 0)) + '****' + (val.substring(7));
      }
    }
  },
    methods: {
      showInfo() {
      //从cookie中获取信息
      var userStr =cookie.get("guli_ucenter");
      //转字符串转换成json对象(js对象)
      if (userStr) {
        this.loginInfo = JSON.parse(userStr);
      }
    },
    //更改头像
    handleAvatarSuccess(res, file) {
      this.loginInfo.avatar = res.data.url;
      index.updateUcenter(this.loginInfo).then(resp=>{
            var str=JSON.stringify(this.loginInfo)
            //将用户信息记录cookie
            cookie.set("guli_ucenter",str, { domain: "localhost"});
        })
    },
    //更改性别
    changeHandler(value){
        this.loginInfo.sex = value;
        index.updateUcenter(this.loginInfo).then(resp=>{
            var str=JSON.stringify(this.loginInfo)
            //将用户信息记录cookie
            cookie.set("guli_ucenter",str, { domain: "localhost"});
        })
    },
    //更改年龄
    onmouseleave(){
        index.updateUcenter(this.loginInfo).then(resp=>{
            var str=JSON.stringify(this.loginInfo)
            //将用户信息记录cookie
            cookie.set("guli_ucenter",str, { domain: "localhost"});
        })
    },
    //修改密码的表单
    updatepassword(){
            this.showClass=true
            this.visibleSubmit='none'
    },
    //修改密码
    submit(){
        if(this.password){
        if(this.loginInfo.password===md5(this.password)){
        if(this.password2){
        if(this.password!=this.password2){
        this.loginInfo.password=md5(this.password2)
        index.updateUcenter(this.loginInfo).then(resp=>{
            var str=JSON.stringify(this.loginInfo)
            //将用户信息记录cookie
            cookie.set("guli_ucenter",str, { domain: "localhost"});
            this.no()
            this.$message({
              type: "success",
              message: "修改成功",
            });
        })
        }else{
            this.$message({
              type: "error",
              message: "新密码与旧密码一致",
            });
        }
        }else{
            this.$message({
              type: "error",
              message: "请输入新密码",
            });
        }
        }else{
            this.$message({
              type: "error",
              message: "旧密码错误",
            });
        }
        }else{
            this.$message({
              type: "error",
              message: "请输入旧密码",
            });
        }
    },
    //取消修改密码
    no(){
        this.password=''
        this.password2=''
        this.showClass=false
        this.visibleSubmit=''
    }
    }
}
</script>

<style  scoped>
</style>
